<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<style>
    body {
        font: 13px "simhei", Arial, Helvetica, sans-serif;
    }

    .el-header a {
        color: #666;
        text-decoration: none;
    }

    .el-header .el-menu-item a {
        font-size: 15px;
        text-decoration: none;
        color: white;
    }

    .el-card__body, .el-main {
        padding: 0px;
    }
    .el-menu.el-menu--horizontal {
        border: 0; /*去掉导航菜单自带的边框*/
    }

    a{
        font-size: 15px;
        text-decoration: none;
        color: white;
    }

    .el-button {
        padding: 9px 15px
    }
    .el-main img:hover{transform: scale(1.1);}
    .el-main img{transition-duration: 1s;}


</style>
<body>
<div id="app">

    <el-header height="60px" style="background-color: #545c64;position:fixed;top:0;left:0;width:100%;z-index:9999">
        <div style="width: 1200px;margin: 0 auto">
            <img src="../img/zhaopai.jpg" style="vertical-align: middle" width="150" height="60">
            <span style="float:right;margin-right: 10px;">
                    <el-menu mode="horizontal" style="background-color: #545c64">
                        <el-menu-item index="1"><a href="首页.html">网站首页</a></el-menu-item>
                        <el-menu-item index="2"><a href="关于我们.html">关于我们</a></el-menu-item>
                        <el-menu-item index="3"><a href="photoPrice.html">拍摄价格</a></el-menu-item>
                        <el-menu-item index="4"><a href="作品展示.html">作品展示</a></el-menu-item>
                        <el-menu-item index="5"><a href="联系我们.html">联系我们</a></el-menu-item>
                    </el-menu>
                </span>
        </div>
    </el-header>
    <img src="../img/backimg.jpg" style="width:100% ;height:100% ">
    <el-main style="width: 100%;margin: 30px auto;background-color: #F2F2F2">
        <el-row gutter="20px">
            <el-col offset="3" span="21" >

                <el-col span="5"  v-for="a in albumArr">
                    <el-card style="margin: 5px">
                        <img  :src="a.url" width="100%">
                        <p style="background-color: #2a333c;text-align: center;font-size: 16px;font-weight: bold;
                    margin: 0;padding: 10px">
                            <a href="">{{a.photograph}}</a></p>
                    </el-card>
                </el-col>

            </el-col>

        </el-row>

        <div style="width: 300px;margin: 0 auto;overflow: hidden">
            <el-button><a href="作品展示.html"style="color: black;text-decoration: none">上一页</a></el-button>
            <span> <el-button > <a href=作品展示.html" style="color: black;text-decoration: none">1</a> </el-button></span>
            <span>  <el-button> <a href="作品展示2.html"style="color: black;text-decoration: none">2</a></el-button></span>
            <span> <el-button><a href="作品展示2.html"style="color: black;text-decoration: none">下一页</a></el-button></span>
        </div>


    </el-main>

    <el-footer height="300px" style="background-color: #2a333c">
        <div style="width: 1200px;margin: 0 auto;color: white;padding: 50px 50px">
            <div style="float: left">
                <p>关注公众号</p>
                <img src="../img/erweima.jpg">
            </div>
            <span style="float: left;margin: 0  100px">
      <p style="font-size: 16px">营业时间:</p>
      <p>前门店、花市店、宋家庄店、</p>
       <p> 西大望路店、星火店  </p>
        <p> （AM 8:30-PM 19:00）</p>
      <p>甘家口店、龙德广场店 </p>
        <p>（AM 10:00-PM 20:00）</p>
      </span>
            <span style="float: left; text-align: center;margin-left: 100px">
        <p>大北照相馆官方网站，为您提供照相前指导，普及照相知识，提供优质网络服务！</p>
        <p>北京大北照相有限责任公司 京ICP备15047318号-1</p>
      </span>
        </div>
    </el-footer>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                currentIndex:"1",
                albumArr: [{url: "../img/vignette.jpg", photograph: "儿童彩色虚光"},
                    {url: "../img/black_white.jpg", photograph: "儿童黑白虚光"},
                    {url: "../img/children.jpg", photograph: "儿童摄影"},
                    {url: "../img/customs.jpg", photograph: "儿童古风艺术照"},
                    {url: "../img/multicolour.jpg", photograph: "彩色肖像"},
                    {url: "../img/multicolour_1.jpg", photograph: "彩色肖像"},
                    {url: "../img/ancient.jpg", photograph: "复古合影"},
                    {url: "../img/wedding.jpg", photograph: "婚纱摄影"}],
                albumArr2:[{url: "../img/ancient_1.jpg", photograph: "复古肖像"},
                    {url: "../img/multicolour_2.jpg", photograph: "彩色肖像"},
                    {url: "../img/black_white1.jpg", photograph: "黑白肖像"}]
            }
        },
        methods: {

        }
    })
</script>
</html>